<template>
	<view>
		<view class="uni-list">
			<view class="row-css" style="padding: 30rpx 20rpx;background: #FFFFFF;">
				承运企业
				<view style="position: relative;padding-left: 20rpx;flex: 1;margin-top: -3rpx;">
					<input v-model="etpName" @input="inputChange" placeholder="请输入承运方企业名称" />
					<view class="ul">
						<view class="li" v-for="(item, index) in list" :key="index" @click="select(item)">
							{{ item.etpName }}
						</view>
					</view>
				</view>
				<image style="width: 38rpx;height: 33rpx;margin-left: 10rpx;" mode="aspectFit" @click="oncard"
					src="/static/icon_scan.png"></image>
			</view>
			<view class="row-css" style="align-items: center;margin: 20rpx 0;">
				<image style="width: 28rpx;height: 28rpx;margin: 0 20rpx;" mode="aspectFit"
					src="/static/icon_caveat.png"></image>
				<view style="color: #FB8536;font-size: 24rpx;">可通过输入承运企业名称或扫描邀请二维码完成加入操作</view>
			</view>
			<!-- <view class="info-wrap" v-show="isShow">
				<view class="item">
					<view class="item-head">
						<view class="title">请选择需要加入的车辆</view>
						<view v-if="notAddList.length">
							<checkbox-group @change="allChange">
								<label style="display: flex;justify-content: center;align-items: center;">
									<text class="all-btn">全选</text>
									<checkbox :value="allChecked" :checked="allChecked" />
								</label>
							</checkbox-group>
						</view>
					</view>
					<view class="item-body">
						<checkbox-group @change="checkboxChange">
							<label class="list-item" v-for="item in notAddList" :key="item.vehicleInfoId">
								<view>{{item.plateNum}}</view>
								<checkbox :value="item.vehicleInfoId" :checked="item.checked" />
							</label>
						</checkbox-group>
						<view class="gray-text" v-if="!notAddList.length">暂无可加入车辆信息</view>
					</view>
				</view>
				<view class="item">
					<view class="item-head">
						<view class="title">已加入车辆</view>
					</view>
					<view class="item-body">
						<view v-if="addList.length" class="list-item" v-for="item in addList" :key="item.vehicleInfoId">
							{{item.plateNum}}
						</view>
						<view class="gray-text" v-if="!addList.length">暂无已加入车辆信息</view>
					</view>
				</view>
			</view> -->
			<view class="position-fixed" @click="onjoincarry">申请</view>
		</view>
	</view>
</template>

<script>
	import throttle from '@/common/helper/throttle.js'
	export default {
		data() {
			return {
				carrieritems: [],
				list: [],
				etpId: '',
				etpName: '',
				exemptCode: '',

				isShow: false,
				allChecked: false,
				AllList: [], //所有车辆列表
				addList: [], // 已添加车辆列表
				notAddList: [], // 未添加车辆列表
				vehicleIds: [], // 已选择车辆
			};
		},
		methods: {
			search(e) {
				let val = e.detail.value.trim();
				console.log('ddsddd========================', val);
				let {
					carrieritems
				} = this;
				let arr = [];
				for (let i = 0; i < carrieritems.length; i++) {
					if (carrieritems[i].etpName.indexOf(val) !== -1) {
						arr.push(carrieritems[i]);
					}
				}
				if (!val) {
					this.list = [];
				} else {
					this.list = arr;
					let obj = this.list.filter((item) => {
						return val === item.etpName
					})
					if(obj.length){
						console.log(11111)
						this.select(obj[0])
					}
				}
				
			},
			inputChange(e) {
				let val = e.detail.value.trim();
				if (!val) {
					this.list = []
					return
				}
				throttle(() => {
					this.wxRequest({
						url: `${this.API}/captainApp/captainEnterprise?etpName=${val}`,
						method: 'GET',
						success: res => {
							this.list = res.data.data;
						}
					});
				}, 1000)
				
			},
			select(item) {
				this.etpId = item.etpId;
				this.etpName = item.etpName;
				this.list = [];
				this.AllList = []

				//查询司机下车辆是否关联企业
				// this.wxRequest({
				// 	url: `${this.API}/miniApp/vehicle/getDriverVehicleList?etpId=${this.etpId}`,
				// 	method: 'POST',
				// 	title: '提交中...',
				// 	success: res => {
				// 		let list = res.data.data
				// 		let map = new Map();
				// 		for (let item of list) {
				// 			if (!map.has(item.vehicleInfoId)) {
				// 				map.set(item.vehicleInfoId, item);
				// 			};
				// 		};
				// 		list = [...map.values()];
				// 		this.AllList = list
				// 		if (this.AllList.length) {
				// 			this.isShow = true
				// 		} else {
				// 			this.isShow = false
				// 		}
				// 		this.notAddList = list.filter(item => {
				// 			return item.flag == 0
				// 		})
				// 		this.addList = list.filter(item => {
				// 			return item.flag == 1
				// 		})
				// 		console.log(this.notAddList)
				// 	},
				// 	complete: res => {
				// 		// if (res.data.msg == '已添加到企业,无需重复添加') {
				// 		// 	uni.switchTab({
				// 		// 		url: '/pages/index/mine'
				// 		// 	});
				// 		// }
				// 	}
				// })
			},
			onjoincarry() {
				if (!this.etpName) {
					uni.showToast({
						title: '请选择企业后再提交',
						icon: 'none'
					});
					return;
				}
				this.wxRequest({
					url: `${this.API}/captainApp/saveCaptainEtp?etpId=` + this.etpId,
					method: 'POST',
					title: '提交中...',
					success: res => {
						if (res.data.code == 0) {
							const pages = getCurrentPages()
							uni.showToast({
								title: '申请成功',
								icon: 'none',
								success() {
									console.log(pages)
									if (pages.length > 1) {
									    const prevPage = pages[pages.length - 2]
									    uni.navigateBack({
									        success: () => {
									            // @ts-ignore
									            const { $vm } = prevPage
									            // 刷新上一个页面
									            $vm.onmyCorp && $vm.onmyCorp()
									        }
									    })
									}
								}
							})
						}
						
						
						// setTimeout(() => {
						// 	// 切换承运商
						// 	uni.setStorageSync(this.DATA_KEY.etpId, this.etpId);
						// 	uni.setStorageSync(this.DATA_KEY.etpName, this.etpName);
						// 	if (!this.AllList.length) {
						// 		uni.navigateTo({
						// 			url: '/pages/personal/vehiclelist?flag=true'
						// 		});
						// 	} else {
						// 		uni.navigateTo({
						// 			url: '/pages/personal/vehiclelist'
						// 		});
						// 	}
						// }, 1000)
					}
				});
			},
			oncard() {
				let that = this;
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						console.log('条码：' + JSON.stringify(res));
						console.log('条码内容：' + res.result.split('=')[2].split('&')[0]);
						console.log('条码内容：' + res.result.split('=')[3].split('&')[0]);
						that.etpId = res.result.split('=')[2].split('&')[0];
						that.etpName = res.result.split('=')[3].split('&')[0];
						if (res.result.split('=').length > 4) {
							console.log('条码内容3：' + res.result.split('=')[4].split('&')[0]);
							that.exemptCode = res.result.split('=')[4];
						}
						
						//查询司机下车辆是否关联企业
						// that.wxRequest({
						// 	url: `${that.API}/miniApp/vehicle/getDriverVehicleList?etpId=${that.etpId}`,
						// 	method: 'POST',
						// 	title: '提交中...',
						// 	success: res => {
						// 		let list = res.data.data
						// 		let map = new Map();
						// 		for (let item of list) {
						// 			if (!map.has(item.vehicleInfoId)) {
						// 				map.set(item.vehicleInfoId, item);
						// 			};
						// 		};
						// 		list = [...map.values()];
						// 		that.AllList = list
						// 		if (that.AllList.length) {
						// 			that.isShow = true
						// 		} else {
						// 			that.isShow = false
						// 		}
						// 		that.notAddList = list.filter(item => {
						// 			return item.flag == 0
						// 		})
						// 		that.addList = list.filter(item => {
						// 			return item.flag == 1
						// 		})
						// 	},
						// 	complete: res => {
						// 		// if (res.data.msg == '已添加到企业,无需重复添加') {
						// 		// 	uni.switchTab({
						// 		// 		url: '/pages/index/mine'
						// 		// 	});
						// 		// }
						// 	}
						// })
						
						// that.wxRequest({
						// 	url: `${that.API}/driverService/checkInvitationCode`,
						// 	method: 'POST',
						// 	data: {
						// 		driverId: uni.getStorageSync(that.DATA_KEY.userInfo).driverId,
						// 		etpId: that.etpId,
						// 		exemptCode: that.exemptCode
						// 	},
						// 	success: res => {
						// 		console.log(res)
						// 	}
						// });
					}
				});
			},


			// 选择车辆
			checkboxChange: function(e) {
				let items = this.notAddList
				let values = e.detail.value;
				this.vehicleIds = values
				values.length === items.length ? this.allChecked = true : this.allChecked = false
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.vehicleInfoId)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			allChange(e) {
				this.vehicleIds = []
				let items = this.notAddList
				let checked = e.detail.value.length
				if (checked) {
					this.allChecked = true
					items.forEach(item => {
						this.$set(item, 'checked', true)
						this.vehicleIds.push(item.vehicleInfoId)
					})
				} else {
					this.allChecked = false
					this.vehicleIds = []
					items.forEach(item => {
						this.$set(item, 'checked', false)
					})
				}
			}

		},
		onLoad(options) {
			this.etpId = options.etpId;
			this.etpName = options.etpName;
			this.exemptCode = options.exemptCode;
			console.log(options)
			if(options.exemptCode){
				this.select(options)
			}
			// this.wxRequest({
			// 	url: `${this.API}/captainApp/captainEnterprise?etpName=`,
			// 	method: 'GET',
			// 	success: res => {
			// 		this.carrieritems = res.data.data;
			// 	}
			// });
		}
	};
</script>

<style lang="scss">
	page {
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}

	.row-css {
		display: flex;
		flex-direction: row;
	}

	.column-css {
		display: flex;
		flex-direction: column;
	}

	.position-fixed {
		background: #007aff;
		display: flex;
		position: fixed;
		bottom: 20rpx;
		justify-content: center;
		border-radius: 10rpx;
		color: #ffffff;
		padding: 20rpx;
		margin: 40rpx;
		width: 84%;
		font-size: 24rpx;
	}

	.input {
		border: 1upx solid gray;
		height: 90upx;
		padding-left: 10upx;
		font-size: 30upx;
		box-sizing: border-box;
	}

	.ul {
		position: absolute;
		margin-top: 30rpx;
		left: 0;
		top: 100%;
		width: 100%;
		background: #ffffff;
	}

	.li {
		border-bottom: 1rpx solid #eeeeee;
		padding: 25rpx 20rpx;
	}

	.info-wrap {
		checkbox {
			transform: scale(0.8);
		}

		.item {
			margin-top: 24rpx;
			padding: 24rpx;
			background: #fff;
		}

		.item-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 16rpx;
			border-bottom: 2rpx solid #f5f7fb;

			.title {
				color: #000;
				font-size: 32rpx;
				font-weight: 500;
			}

			.all-btn {
				margin-right: 18rpx;
				font-size: 26rpx;
				color: #333;
			}
		}

		.list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 18rpx 0;
			border-bottom: 2rpx solid #f5f7fb;

			&:last-child {
				border-bottom: 2rpx solid transparent;
			}
		}

		.gray-text {
			font-size: 32rpx;
			color: #9E9E9E;
			text-align: center;
			padding: 32rpx 0;
			margin-top: 12rpx;
		}
	}
</style>
